<template>
  <div class="container">
    <div class="card">
      <h1>🎓 初一英语单词记忆游戏</h1>
      <p>通过有趣的游戏方式学习英语单词，提高记忆效率！</p>
      
      <div class="game-grid">
        <div class="card game-card" @click="$router.push('/word-match')">
          <h3>🔗 单词配对</h3>
          <p>将英文单词与中文含义正确配对</p>
          <div class="game-stats">
            <span>难度: ⭐⭐</span>
            <span>时间: 2-3分钟</span>
          </div>
        </div>
        
        <div class="card game-card" @click="$router.push('/word-spelling')">
          <h3>✏️ 单词拼写</h3>
          <p>根据中文提示拼写正确的英文单词</p>
          <div class="game-stats">
            <span>难度: ⭐⭐⭐</span>
            <span>时间: 3-5分钟</span>
          </div>
        </div>
        
        <div class="card game-card" @click="$router.push('/word-memory')">
          <h3>🧠 记忆翻牌</h3>
          <p>翻牌记忆游戏，考验你的记忆力</p>
          <div class="game-stats">
            <span>难度: ⭐⭐⭐⭐</span>
            <span>时间: 5-8分钟</span>
          </div>
        </div>
        
        <div class="card game-card" @click="$router.push('/campus-simulator')">
          <h3>🏫 Emma's School Day</h3>
          <p>Experience a day in the life of Emma, a British schoolgirl</p>
          <div class="game-stats">
            <span>Difficulty: ⭐⭐</span>
            <span>Time: 10-15 minutes</span>
          </div>
        </div>
        
        <div class="card game-card" @click="$router.push('/tang-poetry')">
          <h3>📜 唐诗学习</h3>
          <p>感受中华文化的瑰宝，品味古典诗词的韵味</p>
          <div class="game-stats">
            <span>难度: ⭐⭐</span>
            <span>时间: 5-10分钟</span>
          </div>
        </div>
        
        <div class="card game-card" @click="$router.push('/math-learning')">
          <h3>📐 数学知识点复习</h3>
          <p>系统复习初一数学重要知识点，掌握易错点和重点难点</p>
          <div class="game-stats">
            <span>难度: ⭐⭐⭐</span>
            <span>时间: 10-20分钟</span>
          </div>
        </div>
      </div>
      
      <div class="features">
        <h2>游戏特色</h2>
        <ul>
          <li>🎯 针对初一学生设计的词汇量</li>
          <li>🎮 多种游戏模式，寓教于乐</li>
          <li>🇬🇧 Emma's School Day - 体验英国女孩的校园生活</li>
          <li>📜 唐诗学习 - 感受中华文化的瑰宝</li>
          <li>📐 数学知识点复习 - 系统掌握初一数学重点难点</li>
          <li>❌ 易错点专项练习 - 针对性提高解题准确性</li>
          <li>📝 错题本功能 - 智能记录和复习错题</li>
          <li>📊 实时成绩统计和进度跟踪</li>
          <li>🎨 美观的界面设计，提升学习体验</li>
          <li>📱 响应式设计，支持各种设备</li>
        </ul>
      </div>
      
      <div class="word-categories">
        <h2>单词分类</h2>
        <div class="category-grid">
          <div v-for="category in categories" :key="category" class="category-item">
            <span class="category-name">{{ category }}</span>
            <span class="category-count">{{ getCategoryCount(category) }}个单词</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCategories, getWordsByCategory } from '../data/words.js'

export default {
  name: 'Home',
  data() {
    return {
      categories: []
    }
  },
  mounted() {
    this.categories = getCategories()
  },
  methods: {
    getCategoryCount(category) {
      return getWordsByCategory(category).length
    }
  }
}
</script>

<style scoped>
h1 {
  text-align: center;
  color: #2c3e50;
  margin-bottom: 20px;
  font-size: 2.5em;
}

p {
  text-align: center;
  color: #7f8c8d;
  font-size: 1.2em;
  margin-bottom: 30px;
}

.game-card {
  cursor: pointer;
  text-align: center;
  transition: all 0.3s ease;
}

.game-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 40px rgba(0,0,0,0.2);
}

.game-card h3 {
  color: #2c3e50;
  margin-bottom: 10px;
  font-size: 1.5em;
}

.game-card p {
  color: #7f8c8d;
  margin-bottom: 15px;
}

.game-stats {
  display: flex;
  justify-content: space-between;
  font-size: 0.9em;
  color: #95a5a6;
}

.features {
  margin-top: 40px;
}

.features h2 {
  color: #2c3e50;
  margin-bottom: 20px;
  text-align: center;
}

.features ul {
  list-style: none;
  padding: 0;
}

.features li {
  padding: 10px 0;
  color: #34495e;
  font-size: 1.1em;
}

.word-categories {
  margin-top: 40px;
}

.word-categories h2 {
  color: #2c3e50;
  margin-bottom: 20px;
  text-align: center;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}

.category-item {
  background: linear-gradient(135deg, #74b9ff, #0984e3);
  color: white;
  padding: 15px;
  border-radius: 10px;
  text-align: center;
  transition: all 0.3s ease;
}

.category-item:hover {
  transform: scale(1.05);
}

.category-name {
  display: block;
  font-weight: bold;
  font-size: 1.1em;
  margin-bottom: 5px;
}

.category-count {
  display: block;
  font-size: 0.9em;
  opacity: 0.9;
}
</style> 